<template>
  <div>
    <FormPanel ref="form" :labelPosition="'top'" :labelWidth="130" :list="formList" :cols="3" :isSubmitBtn="false" :collapse="false" />
    <div class="footer">
      <el-button type="primary" @click="closeDrawer('save')">保 存</el-button>
      <el-button @click="closeDrawer">关 闭</el-button>
    </div>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import { queryAllSeries, queryAllModelBySeries } from '@/api/omSaleP/KeyCustomers/KeyCustomerInfo/index.js';
export default {
  name: 'addDetail',
  mixins: [dictionary],
  props: {
    type: {
      type: String,
      require: true,
    },
    rowData: {
      type: Object,
    },
  },
  data() {
    return {
      formList: this.createdFrom(),
    };
  },
  created() {
    if (this.type === 'followUp') {
      this.formList = this.createdFromUp();
    } else {
      this.queryAllSeries();
    }
    this.formList.forEach(async (item) => {
      if (this.rowData[item.fieldName]) {
        if (this.rowData.demandSeriesId) {
          await this.queryAllModelBySeries(this.rowData.demandSeriesId);
        }
        item.initialValue = this.rowData[item.fieldName];
      }
    });
  },
  methods: {
    // 获取所有车系
    async queryAllSeries() {
      const res = await queryAllSeries();
      if (res.resultCode === 200) {
        this.formList.find((item) => item.fieldName == 'demandSeriesId').itemList = res.data.map((y) => ({ text: y.seriesName, value: y.seriesId }));
      }
    },
    async queryAllModelBySeries(id) {
      this.formList.find((item) => item.fieldName == 'demandModelId').initialValue = undefined;
      this.formList.find((item) => item.fieldName == 'demandModelId').itemList = [];
      if (id) {
        const res = await queryAllModelBySeries({ pageNum: id });
        if (res.resultCode === 200) {
          this.formList.find((item) => item.fieldName == 'demandModelId').itemList = res.data.map((y) => ({ text: y.modelName, value: y.modelId }));
        }
      }
    },
    // 清除
    async closeDrawer(type = 'close') {
      if (type === 'save') {
        const [err, form] = await this.$refs.form.GET_FORM_DATA();
        if (err) return;
        this.$emit('close', form);
        return;
      }
      this.$emit('close');
    },
    createdFrom() {
      return [
        {
          type: 'BREAK_SPACE',
          label: '大客户需求信息',
        },
        {
          type: 'SELECT',
          label: '需求车系',
          fieldName: 'demandSeriesId',
          itemList: [],
          change: (val) => {
            this.queryAllModelBySeries(val);
          },
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
        {
          type: 'SELECT',
          label: '需求车型',
          fieldName: 'demandModelId',
          itemList: [],
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
        {
          type: 'INPUT',
          label: '需求数量',
          placeholder: '请输入正整数',
          fieldName: 'demandNum',
          pattern: /^\+?[1-9][0-9]*$/,
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
        {
          type: 'DATE',
          label: '预计采购时间',
          fieldName: 'expectPurchaseDate',
          format: 'yyyy-MM-dd',
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
        {
          type: 'SELECT',
          label: '采购方式',
          fieldName: 'purchaseType',
          itemList: this.createDictList('2142'),
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
        {
          type: 'INPUT',
          label: '预计采购价格',
          placeholder: '最多保留两位小数',
          // numberFormat: true,
          pattern: /^0\.([1-9]|\d[1-9])$|^[1-9]\d{0,8}\.\d{0,2}$|^[1-9]\d{0,8}$/,
          fieldName: 'expectPurchasePrice',
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
        {
          type: 'INPUT',
          label: '市场指导价',
          placeholder: '最多保留两位小数',
          fieldName: 'marketDirectivePrice',
          pattern: /^0\.([1-9]|\d[1-9])$|^[1-9]\d{0,8}\.\d{0,2}$|^[1-9]\d{0,8}$/,
          // numberFormat: true,
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
      ];
    },
    createdFromUp() {
      return [
        {
          type: 'BREAK_SPACE',
          label: '大客户跟进信息',
        },
        {
          type: 'SELECT',
          label: '意向级别',
          fieldName: 'intentionType',
          itemList: this.createDictList('2143'),
          rules: [{ required: true, message: '请选择', trigger: 'change' }],
        },
        {
          type: 'SELECT',
          label: '跟进结果',
          fieldName: 'followResultType',
          itemList: this.createDictList('2144'),
          rules: [{ required: true, message: '请选择', trigger: 'change' }],
        },
        {
          type: 'DATE',
          label: '跟进时间',
          fieldName: 'followDate',
          format: 'yyyy-MM-dd',
          rules: [{ required: true, message: '请选择', trigger: 'change' }],
        },
        {
          type: 'SELECT',
          label: '跟进方式',
          fieldName: 'followType',
          initialValue: 21451001,
          itemList: this.createDictList('2145'),
          rules: [{ required: true, message: '请选择', trigger: 'change' }],
        },
        {
          type: 'INPUT',
          label: '跟进人',
          fieldName: 'followPersonName',
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
        {
          type: 'DATE',
          label: '预计下次跟进时间',
          fieldName: 'nextFollowDate',
          format: 'yyyy-MM-dd',
          rules: [{ required: true, message: '请选择', trigger: 'change' }],
        },
        {
          type: 'TEXT_AREA',
          label: '跟进内容',
          fieldName: 'followContent',
          selfCols: 3,
          maxLength: 100,
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
      ];
    },
  },
};
</script>
<style>
.footer {
  position: 'absolute';
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
  border-top: '1px solid #e9e9e9';
  padding: '10px 20px';
  background: '#fff';
  text-align: 'right';
  padding: 20px 30%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
</style>